<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>页面管理</el-breadcrumb-item>
      <el-breadcrumb-item>修改页面</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>
      <!-- 提示区 -->
      <el-alert title="修改小程序页面" type="warning" description="修改小程序首页轮播图，切记封面图片不要过小！" show-icon :closable="false"></el-alert>

      <!-- 表格区域 -->
      <el-table @expand-change="expandSelect" ref="refTable" :data="list" border stripe>
        <el-table-column type="expand">
          <template slot-scope="scope">
            <!-- <el-select v-model="scope.row.pos" placeholder="请选择公司">
              <el-option v-for="item in posList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="联系电话：">
                <span>{{ scope.row.phone }}</span>
              </el-form-item>
              <el-form-item label="创建时间：">
                <span>{{ scope.row.time }}</span>
              </el-form-item>
            </el-form>-->
            <el-button type="primary" @click="showposimg(scope.row.id)">修改图片</el-button>
            <el-button type="primary" @click="showpos(scope.row.id)">修改对应岗位</el-button>
          </template>
        </el-table-column>
        <el-table-column label="公司">
          <template slot-scope="scope">{{scope.row.company.name}}</template>
        </el-table-column>
        <el-table-column label="岗位">
          <template slot-scope="scope">岗位名：{{scope.row.company.positionList[0].name}}</template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 修改对应岗位 -->
    <el-dialog title="修改对应岗位" :visible.sync="putpos" width="30%" @close="putposClose">
      <el-form :model="putFrom" :rules="putRules" ref="putRef" label-width="80px">
        <el-form-item label="岗位名称" prop="id">
          <el-select v-model="putFrom.position_id" placeholder="请选择岗位">
            <el-option
              class="long"
              v-for="item in posList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.companyName }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="putpos = false">取 消</el-button>
        <el-button type="primary" @click="goputpos">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改图片 -->
    <el-dialog title="修改对应岗位" :visible.sync="putposimg" width="30%" @close="clear">
      <el-upload
        action="http://gz.pwbov.cn/upload"
        :on-remove="handleRemove"
        list-type="picture"
        :file-list="fileList"
        :on-success="handleLogoSuccess"
        :limit="1"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5MB</div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="putposimg = false">取 消</el-button>
        <el-button type="primary" @click="goputposimg">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      posList: [],
      putpos: false,
      putFrom: {},
      putRules: {
        id: [{ required: true, message: '请选择岗位名称', trigger: 'change' }]
      },
      putposimg: false,
      putimgFrom: {},
      fileList: []
    }
  },
  created() {
    this.getList()
    this.getposList()
  },
  methods: {
    // 获取轮播图
    async getList() {
      const { data: res } = await this.$http.get('index/url')
      if (res.meta.status != 200) {
        return this.$message.error('获取轮播图信息失败！')
      }
      this.list = res.data
    },
    // 控制手风琴效果
    expandSelect(row, expandedRows) {
      if (expandedRows.length > 1) {
        this.expands = []
        if (row) {
          this.expands.push(row)
        }
        this.$refs.refTable.toggleRowExpansion(expandedRows[0])
      } else {
        this.expands = []
      }
    },
    // 获取岗位列表
    async getposList() {
      const { data: res } = await this.$http.get('position/all', {
        params: {
          pageSize: 1000000,
          pageNum: 1
        }
      })
      if (res.meta.status != 200) {
        return this.$message.error('获取岗位失败！')
      }
      this.posList = res.data.list
    },
    // 展示修改岗位box
    showpos(id) {
      this.putpos = true
      this.putFrom.id = id
    },
    // 确定修改
    goputpos() {
      this.$refs.putRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.put('index/url', this.putFrom)
        if (res.meta.status != 200) {
          return this.$message.error('修改失败！')
        }
        this.$message.success('修改成功！')
        this.putpos = false
      })
    },
    // 关闭box
    putposClose() {
      this.$refs.putRef.resetFields()
    },
    // 展示put img box
    showposimg(id) {
      this.putposimg = true
      this.putimgFrom.id = id
    },
    // 确定修改图片
    async goputposimg() {
      const { data: res } = await this.$http.put('index/url', this.putimgFrom)
      if (res.meta.status != 200) {
        return this.$message.error('修改失败！')
      }
      this.$message.success('修改成功！')
      this.putposimg = false
    },
    handleLogoSuccess(res) {
      this.putimgFrom.url = res.data.url
    },
    async handleRemove(file) {
      console.log(1)
    },
    clear() {
      this.fileList = []
    }
  }
}
</script>

<style>
.long {
  width: 450px;
}
</style>